<template>
    <navigation :path="path" @path-to="pathTo">
        <div class="d-sm-block d-none" style="position:absolute;right:50px">
            <a class="ml-2" href="edit" @click.prevent="$router.push({name: 'edit', path: '/edit/:id', params: {}})">编辑</a>
        </div>
    </navigation>
</template>

<script>
export default {
    data() {
            return {
            }
        },
    components: {
        'navigation': component('/static/navigation.vue'),
    },
    props: ['path'],
    emits: ['pathTo'],
    methods: {
        pathTo(path) {
            this.$emit('pathTo', path)
        },
    },
    watch: {
    },
    computed: {
        paths() {
            return this.path && this.path !== '/' ? this.path.slice(1).split('/') : []
        }
    },
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
